<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/header.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content .mui-table-view li {
				padding-right: 10px;
			}
			.head-img{
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<!-- <header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<span class="mui-title title-color" style="text-align: left; margin-top: 2px;">个人信息</span>
		</header> -->
		<header class="mui-bar mui-bar-nav title">
			<span class="mui-action-back nav mui-pull-left title-color" style="line-height: 44px; margin-left: 5px;">个人信息</span>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" style="margin: 0;">
				<li class="mui-table-view-cell mui-media">
					<a id="head-portrait" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="line-height: 42px;color: lightgray;margin-left: 3px;"></span>
						<img id="thum_head_portrait" class="mui-media-object mui-pull-right head-img" src="../../image/head/default_head-1.jpg">
						<div class="mui-media-body" style="line-height: 42px;font-size: 16px;">
							头像
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="btn_nickname" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
						<span id="nickname" class="mui-pull-right" style="color: gray;font-size: 14px;"></span>
						<div class="mui-media-body">
							昵称
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<span id="account" class="mui-pull-right" style="color: gray;font-size: 14px; margin-right: 10px;;"></span>
						<div class="mui-media-body">
							微信号
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a id="btn_qr_code" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
						<img class="mui-media-object mui-pull-right" src="../../image/qrcode.png" style="max-width: 24px;height: 20px;">
						<div class="mui-media-body">
							二维码名片
						</div>
					</a>
				</li>
			</ul>

			<br />

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_logout" href="javascript:;">
						<div class="mui-media-body">
							退出登录
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_clear" href="javascript:;">
						<div class="mui-media-body">
							清除缓存
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_user" href="javascript:;">
						<div class="mui-media-body">
							查看缓存用户
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_friends" href="javascript:;">
						<div class="mui-media-body">
							查看本地好友
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_delete_friends" href="javascript:;">
						<div class="mui-media-body">
							删除本地好友
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_dictionaries" href="javascript:;">
						<div class="mui-media-body">
							查看本地字典
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_chat_message" href="javascript:;">
						<div class="mui-media-body">
							查看本地聊天记录
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_snapshot_message" href="javascript:;">
						<div class="mui-media-body">
							查看本地聊天快照
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_create_table" href="javascript:;">
						<div class="mui-media-body">
							创建表
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_delete_table" href="javascript:;">
						<div class="mui-media-body">
							删除表
						</div>
					</a>
				</li>
			</ul>

		</div>
		<script src="../../js/mui.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/api/chatapi.js"></script>
		<script src="../../js/db/db.js"></script>
		<script src="../../js/db/dictionariesdb.js"></script>
		<script src="../../js/db/frienddb.js"></script>
		<script src="../../js/db/chatmessagedb.js"></script>
		<script src="../../js/db/chatsnapshotmessagedb.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {
				// 获得当前的webview，刷新当前用户信息
				let currentWebview = plus.webview.currentWebview();
				currentWebview.addEventListener("show", function() {
					// 刷新个人信息
					refreshUserInfo();
				});

				// 添加自定义事件，刷新个人信息
				window.addEventListener("refresh", function() {
					// 刷新个人信息
					refreshUserInfo();
				});

				// 页面跳转，我的头像
				let headPortrait = document.getElementById("head-portrait");
				headPortrait.addEventListener("tap", function() {
					mui.openWindow("head-portrait.html", "head-portrait.html");
				});

				// 页面跳转，修改昵称
				let btnNickname = document.getElementById("btn_nickname");
				btnNickname.addEventListener("tap", function() {
					mui.openWindow("nickname.html", "nickname.html");
				});

				// 查看我的二维码
				let btnQrCode = document.getElementById("btn_qr_code");
				btnQrCode.addEventListener("tap", function() {
					mui.openWindow("qr-code.html", "qr-code.html");
				});

				// 用户退出
				let btnLogout = document.getElementById("btn_logout");
				btnLogout.addEventListener("tap", function() {
					let user = app.getCacheUser();
					let clientId = user.clientId;
					chatapi.logout({clientId}, () => {
						app.removeCacheUser();
						let indexWebview = plus.webview.getWebviewById('index.html');
						indexWebview.evalJS("close()");
						// 获取所有Webview窗口
						let webviews = plus.webview.all();
						for (let webview of webviews) {
							if(webview.id== 'HBuilder'){
								continue;
							}
							plus.webview.close(webview);
						}
						mui.openWindow("../../login.html", "login.html");
					})
				});
				
				// ===============================================================================

				// 清除缓存
				let btnClear = document.getElementById("btn_clear");
				btnClear.addEventListener("tap", function() {
					plus.storage.clear();
					mui.openWindow("../../login.html", "login.html");
				});

				// 本地好友列表记录
				let btn_user = document.getElementById("btn_user");
				btn_user.addEventListener("tap", function() {
					let user = app.getCacheUser();
					console.log(JSON.stringify(user));
				});
				// 创建表
				let btn_create_table = document.getElementById("btn_create_table");
				btn_create_table.addEventListener("tap", function() {
					db.createDictionariesTable();
					db.createFriendTable();
					db.createFriendRequestTable();
					db.createMessageTable();
					db.createSnapshotMessageTable();
				});
				// 删除表
				let btn_delete_table = document.getElementById("btn_delete_table");
				btn_delete_table.addEventListener("tap", function() {
					db.dropTable('t_dictionaries');
					db.dropTable('t_friend');
					db.dropTable('t_friend_request');
					db.dropTable('t_chat_message');
					db.dropTable('t_chat_snapshot_message');
				});

				// 本地好友列表记录
				let btn_friends = document.getElementById("btn_friends");
				btn_friends.addEventListener("tap", function() {
					frienddb.select({
						userId: app.getUserId()
					}, (data) => {
						console.log(JSON.stringify(data));
					});
				});

				// 删除本地好友列表记录
				let btn_delete_friends = document.getElementById("btn_delete_friends");
				btn_delete_friends.addEventListener("tap", function() {
					frienddb.delete(null, null, (data) => {
						console.log(JSON.stringify(data));
					});
				});

				// 查看本地字典记录
				let btn_dictionaries = document.getElementById("btn_dictionaries");
				btn_dictionaries.addEventListener("tap", function() {
					dictionariesdb.select(null, (data) => {
						console.log(JSON.stringify(data));
					});
				});

				// 查看本地聊天记录
				let btn_chat_message = document.getElementById("btn_chat_message");
				btn_chat_message.addEventListener("tap", function() {
					let params = {
						userId: app.getUserId(),
						friendId: 17
					}
					chatmessagedb.select(params, (data) => {
						console.log(JSON.stringify(data));
					});
				});

				// 查看本地聊天快照
				let btn_snapshot_message = document.getElementById("btn_snapshot_message");
				btn_snapshot_message.addEventListener("tap", function() {
					let params = {
						userId: app.getUserId()
					}
					chatsnapshotmessagedb.select(params, (data) => {
						console.log(JSON.stringify(data));
					});
				});
			});

			/**
			 * 刷新个人信息
			 */
			function refreshUserInfo() {
				let user = app.getCacheUser();
				if (user) {
					document.getElementById("nickname").innerHTML = user.nickname;;
					document.getElementById("account").innerHTML = user.account;;
					document.getElementById("thum_head_portrait").src = user.thumHeadPortrait;
				}
			}
		</script>
	</body>

</html>
